<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">Image组件</div>
			<div class="sub-title quote">
				增强版的 img 标签，提供多种图片填充模式，加载中提示、加载失败提示。
			</div>
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基础用法（等价于 fit="fill"）</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
			</code-view>
			<img src="../assets/fill.png" width="200px" />
			<div class="info">
				<p class="info">fill 含义说明</p>
				<p ><span class="danger">红色线框</span>代表容器大小，
				图片宽高均会被压缩或拉伸，至容器一样的大小</p>
				<p>在这种模式下，图片可能会失去原有比例，产生变形</p>
			</div>
				
			<div class="example-title">填充模式 fit = "contain"</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
			</code-view>
			<img src="../assets/contain.png" width="200px" />
			<div class="info">
				<p class="info">contain 含义说明</p>
				<p ><span class="danger">红色线框</span>代表容器大小，
				图片大小会被等比缩放，直到长边完全被显示</p>
				<p>在这种模式下，图片可以保持原有比例，但短边方向可能产生空白</p>
			</div>	
			
			<div class="example-title">填充模式 fit = "cover"</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
			</code-view>
			<img src="../assets/cover.png" height="200px" />
			<div class="info">
				<p class="info">cover 含义说明</p>
				<p ><span class="danger">红色线框</span>代表容器大小，
				图片大小会被等比缩放，直到全面覆盖容器为止</p>
				<p>在这种模式下，容器外的图片部分都将会被裁切</p>
			</div>	
			
			<div class="example-title">填充模式 fit = "none"</div>
			<code-view>
				<template slot="code-html">{{ htmlCode5 }}</template>
			</code-view>
			<img src="../assets/none.png" height="200px" />
			<div class="info">
				<p class="info">none 含义说明</p>
				<p ><span class="danger">红色线框</span>代表容器大小，
				图片会保持原始比例大小，并处于容器的中间位置</p>
				<p>在这种模式下，容器外的图片部分都将会被裁切</p>
			</div>	
			
			<div class="example-title">圆形图片</div>
			<code-view>
				<template slot="code-html">{{ htmlCode6 }}</template>
			</code-view>
			
			<div class="example-title">加载状态提示</div>
			<code-view>
				<template slot="code-html">{{ htmlCode7 }}</template>
			</code-view>
			<p></p>
			<div class="alert">
				<p class="alert">注意事项</p>
				<p>加载中的状态，只在图片进行网络加载时显示，速度较快时，一般难以看到</p>
				<p>
					加载中的loading图标默认为： <gr-icon name="picture-filling" color="#ccc" size="28px"></gr-icon>
					可以使用<span class="danger">loadingIcon</span>属性进行更换
				</p>
				<p>如果需要动态图片，可以使用<span class="danger">loadingImg</span>属性，指定图片地址即可</p>
			</div>	
			
			<div class="example-title">图片懒加载</div>
			<code-view>
				<template slot="code-html">{{ htmlCode8 }}</template>
			</code-view>
			<p></p>
			<div class="alert">
				<p class="alert">注意事项</p>
				<p>懒加载属性需要配合懒加载组件一起使用</p>
				<p>引入懒加载组件即可，代码如下：</p>
				<code-view>
					<template slot="code-js">{{ jsCode8 }}</template>
				</code-view>
				<p>实际上，LazyLoad内部是一个函数，它实现了对窗口的滚动监听，进而实现懒加载效果</p>
				<p>懒加载目前仅针对<span class="danger">image</span>组件起作用，对原生<span class="danger">img</span>标签无效</p>
			</div>	
			
			<div class="example-title">&lt;gr-image&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="60">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="80">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="120">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<br>
			<br>
			<br>
			<br>
			<br>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/imagedemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo,
			CodeView
		},
		data() {
			return {
				jsCode1: `import {Image} from 'gabriel-ui'
Vue.use(Image)`,
				htmlCode2: `<gr-image :src="src1" width="100px" height="100px"/>`,
				htmlCode3: `<gr-image :src="src1" width="100px" height="100px" fit="contain"/>`,
				htmlCode4: `<gr-image :src="src1" width="100px" height="100px" fit="cover"/>`,
				htmlCode5: `<gr-image :src="src1" width="100px" height="100px" fit="none"/>`,
				htmlCode6: `<gr-image :src="src1" width="80px" height="80px" round fit="fill"/>
<gr-image :src="src1" width="80px" height="80px" round fit="contain"/>
<gr-image :src="src1" width="80px" height="80px" round fit="cover"/>
<gr-image :src="src1" width="80px" height="80px" round fit="none"/>`,
				htmlCode7: `<gr-image :src="src1" width="100px" height="100px" loadingText="加载中" />
<gr-image :src="xxxxx" width="100px" height="100px" errorText="加载失败" />
<gr-image :src="xxxxx" width="100px" height="100px" round/>`,
				htmlCode8: `<gr-image :src="src1" width="100px" height="100px" lazyload />`,
				jsCode8: `import LazyLoad from 'gabriel-ui/es/lazyload' 
Vue.use(LazyLoad)
`,
				htmlCode9: ``,
				propertiesExplain: [
					{
						attrName: 'src',
						introduce: `图片地址`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'width',
						introduce: `图片宽度, 单位px或rem均可`,
						type: 'String',
						optionValues: '----',
						defaultValue: '100vw'
					},
					{
						attrName: 'height',
						introduce: `图片高度, 单位px或rem均可`,
						type: 'String',
						optionValues: '----',
						defaultValue: '100vw'
					},
					{
						attrName: 'fit',
						introduce: `图片的填充模式`,
						type: 'String',
						optionValues: 'fill / contain / cover / none',
						defaultValue: 'fill'
					},
					{
						attrName: 'loadingText',
						introduce: `加载中状态的提示文字`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'loadingIcon',
						introduce: `加载中状态的图标`,
						type: 'String',
						optionValues: '----',
						defaultValue: 'picture-fill'
					},
					{
						attrName: 'loadingImg',
						introduce: `加载中状态的图片，同时设置loadingImg和loadingIcon，图片会优先生效`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'errorText',
						introduce: `加载失败后的提示文字`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'errorIcon',
						introduce: `加载失败后的提示图标`,
						type: 'String',
						optionValues: '----',
						defaultValue: 'error'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		}
	}
</script>

<style>
</style>
